<template>
  <div>
    <div
      v-for="(item, index) in courseList"
      :key="index"
      class="course-container"
    >
      <img :src="item.image" alt="" class="img-block" />
      <div class="course-info-block">
        <div class="course-name">
          <span class="course-tag">实战课</span>
          <span class="course-title">{{ item.courseName }}</span>
        </div>
        <div class="course-aply-level">
          <span><strong>难度：</strong>{{ item.level }}</span>
          <span class="applay-num"
            ><strong>报名人数：</strong>{{ item.enroll }}</span
          >
        </div>
        <div class="course-log">
          <div class="log-block">
            <span><strong>笔记：</strong>0</span>
            <span><strong>代码：</strong>0</span>
            <span><strong>问答：</strong>0</span>
          </div>
          <div class="learn-button" @click="toCourseDetial(item.id)">
            继续学习
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserCourseList } from "@/services/user";
export default {
  data() {
    return {
      courseList: [],
    };
  },
  methods: {
    getCourseList() {
      getUserCourseList().then((res) => {
        let course = res.data.data || [];

        this.courseList = course.filter((item) => {
          return !item.free;
        });
      });
    },
    toCourseDetial(courseId) {
      this.$myUtils.OpenNewWindow("/courseDetail", { id: courseId });
    },
  },
  created() {
    this.getCourseList();
  },
};
</script>
<style lang="scss" scoped>
.course-container {
  display: flex;
  margin-bottom: 28px;
  .img-block {
    height: 116px;
    width: 200px;
    margin-right: 30px;
  }
  .course-info-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 108px;
    padding-bottom: 28px;
    border-bottom: 1px solid #d9dde1;
    justify-content: space-between;
    .course-name {
      display: flex;
      align-items: center;
      .course-tag {
        width: 62px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #f5f7fa;
        border-radius: 2px;
        font-size: 12px;
        color: #9199a1;
        font-weight: 400;
        margin-right: 12px;
      }
      .course-title {
        width: 628px;
        font-size: 20px;
        color: #07111b;
        font-weight: 700;
        line-height: 36px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .course-aply-level {
      font-size: 14px;
      color: #4d555d;
      display: flex;
      margin-bottom: 20px;
      span {
        width: 85px;
        margin-right: 10px;
      }
      .applay-num {
        width: 150px;
      }
    }

    .course-log {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .log-block {
        display: flex;
        span {
          width: 75px;
          font-size: 14px;
          color: #4d555d;
          margin-right: 10px;
        }
      }
      .learn-button {
        font-size: 14px;
        border: none;
        color: #fff;
        width: 104px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: rgba(240, 20, 20, 0.6);
        border-radius: 18px;
        cursor: pointer;
      }
    }
  }
}
</style>